<template>
  <!-- 文档 -->
  <div class="doc">
    <!-- 头部 -->
    <mine-header></mine-header>
    <!-- 内容 -->
    <div class="content">
      <!-- 菜单列表 -->
      <side-bar></side-bar>
      <div class="md">
        <!-- 使用文档 -->
        <router-view></router-view>
      </div>
      <!-- <demo-h5 @getframe="changeFrameRouter"></demo-h5>-->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
import { PostMessage } from '@/utils/functions'
// import { PostMessageReturn } from '@/utils/types'
import MineHeader from '@/components/MineHeader'
import SideBar from '@/components/SideBar'
import DemoH5 from '@/components/DemoH5'

const route = useRoute()
let postMessageObj: any = postMessage // 发送消息对象

// frame 跳转
const navigateTo = (path: string) => {
  console.log(path, postMessageObj)

  postMessageObj(path)
}

// 路由更新
onBeforeRouteUpdate(({ path }) => {
  console.log(path)

  navigateTo(path)
})

// 改变 frame 的 router
const changeFrameRouter = (frame: HTMLIFrameElement) => {
  postMessageObj = postMessageObj(frame.contentWindow as Window)
  navigateTo(route.path)
}
</script>
<style scoped lang="less">
@import './index.less';
</style>
